* {
  box-sizing: border-box;
}

:root {
  color-scheme: light dark;
}

html {
  font-size: 16px;
  font-family: Optima, Helvetica, Arial;
}

body {
  height: 100%;
  margin: 0;
  padding: 1rem;
  display: grid;
  grid: "from swap to" 1fr "status status status" auto / 1fr auto 1fr;
  grid-gap: 1rem;
  overflow: hidden;
  min-height: 400px;
  max-width: 1024px;
}

.panel {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-gap: 1rem;
}

.lang-select {
  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  cursor: pointer;
  width: 100%;
}

.panel--from {
  grid-area: from;
}

.panel--to {
  grid-area: to;
}

.swap {
  align-self: center;
  grid-area: swap;
  font-size: 1.1rem;
}

#status {
  grid-area: status;
  text-align: center;
  align-self: center;
}

textarea {
  padding: .5rem;
  font-size: 1rem;
  resize: none;
  border-radius: 2px;
  border: 1px solid #ccc;
}

button {
  cursor: pointer;
  border: 1px solid #88c;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
}

#suggestion {
  display: none;
  cursor: pointer;
}

#translatelanguage {
  color: LinkText;
}

@media (prefers-color-scheme: light) {
  button {
    background: #eef;
  }

  button:hover {
    background: #cce;
  }

  .lang-select {
    background: #f4f4f4;
  }

  #output {
    background-color: #f4f4f4;
  }
}

@media (prefers-color-scheme: dark) {
  #output {
    background-color: #00000010;
  }
  
  #translatefrom, #status {
    color: #eef;
  }
}
